<template>
	<view class="activityDetails">
		<!-- 活动详情 -->
		<view class="detailsSwiper">
			<u-swiper :list="listSwiper" indicator :circular="true" height='240' radius="0"></u-swiper>
		</view>
		<view class="activityDetailsDiv">
			<h1>{{activityDetails.name}}</h1>
			<view class="activityDetailsDivItem" v-if="activityDetails.activityTime">
				<view class="activityDetailsDivItemTop">时间: </view>
				<view class="activityDetailsDivItemBot">
					{{activityDetails.activityTime.join('至')}}
				</view>
			</view>
			<view class="activityDetailsDivItem" v-if="activityDetails.address">
				<view class="activityDetailsDivItemTop">地址: </view>
				<view class="activityDetailsDivItemBot">
					{{activityDetails.address}}
				</view>
			</view>
			<view class="activityDetailsDivItem">
				<view class="activityDetailsDivItemTop">人数:</view>
				<view class="activityDetailsDivItemBot" style="color: #FF6633;">
					{{activityDetails.peopleNum ? activityDetails.peopleNum:'不限'}}
				</view>
			</view>
		</view>
		<view class="activityDetailsDivCon" v-if="activityDetails.activityDetail">
			<view class="activityDetailsDivItemTop">活动详情</view>
			<view class="activityDetailsDivConCon">
				<u-parse :content="activityDetails.activityDetail"></u-parse>
			</view>
		</view>
		<view class="activityDetailsDivCon" v-if="activityDetails.eventNotice">
			<view class="activityDetailsDivItemTop">活动须知</view>
			<view class="activityDetailsDivConCon">
				<u-parse :content="activityDetails.eventNotice"></u-parse>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		activityInfo
	} from '@/api/home.js'
	export default {
		data() {
			return {
				listSwiper: [],
				id: '',
				activityDetails: {}
			};
		},
		onLoad(e) {
			if (e.id) {
				this.id = e.id
			}
			this.getActivityInfo()
		},
		methods: {
			// 获取详情数据
			async getActivityInfo() {
				let res = await activityInfo(this.id)
				if (res.code == 200) {
					this.listSwiper = res.data.photo
					this.activityDetails = res.data
					console.log(res);
				}
			}
		}
	}
</script>

<style lang="scss">
	.activityDetails {
		padding-bottom: 100rpx;

		.activityDetailsDivCon {
			padding: 0 30rpx;
			margin-bottom: 30rpx;

			.activityDetailsDivItemTop {
				font-size: 36rpx;
				margin-bottom: 20rpx;
			}
		}

		.activityDetailsDiv {
			width: calc(100% - 60rpx);
			border-bottom: 1rpx solid #66666614;
			margin: 0 auto 30rpx;

			.activityDetailsDivItem {
				font-size: 30rpx;
				margin-bottom: 20rpx;
				display: flex;
				align-items: center;
				gap: 10rpx;
				color: #666666;


				.activityDetailsDivItemTop {
					width: 75rpx;
				}

				.activityDetailsDivItemBot {
					width: 85%;
					flex-wrap: wrap;
					font-size: 28rpx;
				}
			}

			h1 {
				font-size: 40rpx;
				margin-bottom: 20rpx;
			}
		}

		.detailsSwiper {
			margin-bottom: 30rpx;
		}
	}
</style>